<template>
  <div class="demo1_page">
    <van-nav-bar
      title="demo2"
      left-arrow
      @click-left="$router.push('/publish')"
    />

    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
        v-if="list.length"
        :error.sync="error"
        error-text="请求失败，点击重新加载"
      >
        <van-cell>
          <!-- 将这某一项分封装为一个组件   -->
          <com-recommend-item
            v-for="(item, index) in list"
            :item="item"
            :key="index"
          ></com-recommend-item>
        </van-cell>
      </van-list>
    </van-pull-refresh>



  </div>
</template>

<script>
  import comRecommendItem from '../../components/comRecommendItem';


  export default {
    name: 'demo1',
    components: {
      comRecommendItem,
    },
    data(){
      return {
        list: [],
        loading: false,
        error: false,
        finished: false,
        refreshing: false,
        pageIndex: 1,
        pageSize: 10,
        total: 0,
      }
    },
    mounted() {
      // 初始化数据
      this._initPage()
    },

    methods: {
      async _initPage(){

        // 分页参数
        const params = {
          pageIndex: this.pageIndex,
          pageSize: this.pageSize,
        };

        const res = await this.$api.others.reqMyRecommendPersons(params)
          if(res.code === 200){
            const listArr = res.data.data
            const totalCount = res.data.total

            if (listArr.length === 0) {
              // 判断获取数据条数若等于0
              this.list = [];				// 清空数组
              this.finished = true;		// 停止加载
            }

            // 若数据条数不等于0
            this.total = totalCount		// 给数据条数赋值
            this.list.push(...listArr)	// 将数据放入list中
            this.loading = false;			// 加载状态结束


            // 如果list长度大于等于总数据条数,数据全部加载完成
            if (this.list.length >= totalCount) {
              this.finished = true;		// 结束加载状态
            }
          }
      },

      onLoad() {
        console.log('执行了onLoad')
        // 调用上面方法,请求数据
        this._initPage()
        //
        this.pageIndex++;
        console.log('当前的页码', this.pageIndex)
      },

      onRefresh() {
        console.log('执行刷新了')
        this.finished = false;  // 清空列表数据
        this.loading = true; 	// 将 loading 设置为 true，表示处于加载状态
        this.pageIndex = 1;				// 分页数赋值为1
        this.list = [];				// 清空数组
        console.log('在刷新里面执行onLoad-------------开始')

        this.onLoad(); 				// 重新加载数据

        console.log('在刷新里面执行onLoad--------------结束')
      },
    },
  }
</script>

<style scoped>

</style>
